import React from 'react';
// import axios from 'axios'
// import axios from '../../../src/http';  // 封装的axios
import './TodoList.css'
import TodolistHeader from '../../components/TodolistHeader/TodolistHeader';
import TodolistMain from '../../components/TodolistMain/TodolistMain';
import TodolistFooter from '../../components/TodolistFooter/TodolistFooter';
import { useState } from 'react';
// import { nanoid } from 'nanoid';
import { useEffect } from 'react';
// 导入api封装
import { reqAdd, reqDel, reqSingle, reqButtonAll, reqClearDone, reqGet } from '../../api/todolist.js'

function TodoList(props) {
    let [data, setData] = useState([]);

    // 添加item
    let addtodo = async (title) => {
        // 添加用post请求
        let result = await reqAdd(title);
        setData([
            ...data,
            result
        ])
    }

    // 删除item
    let deleitem = (id) => {

        async function main() {
            let delRes = await reqDel(id);
            console.log(delRes);
            let newdata = data.filter(item => item.id !== id);
            setData(newdata);
        }
        main();
    }

    // 添加单个勾选
    let getcheck = (id, done) => {
        async function main() {
            let result = await reqSingle(id, done);
            // console.log(result);  // 返回修改后的数据
            // 请求成功之后更新data数据
            let newdata = data.map((item) => { // 只能用map返回一个新数组，不能用forEach(在原数组上做更改不会重新渲染)
                if (id === item.id) {
                    item.done = done;
                }
                return item;
            })
            setData(newdata);
        };
        main();
    }

    // 底部全选
    let checkedall = async (bol) => {

        // // 遍历之后单个发请求更改
        // let promises = data.map(item => {
        //     return axios.patch(`/data/${item.id}`, { done: bol });  // 多次请求有bug
        // });
        await reqButtonAll(data, bol)

        let newdata = data.map((item) => {
            item.done = bol;
            return item;
        });
        setData(newdata);


        // let newdata = data.map((item) => {
        //     item.done = bol;
        //     return item;
        // });


        // async function main() {
        //     let result = await axios.put(`/data`, {
        //         data: newdata
        //     })
        //     console.log(result);
        //     setData(newdata);
        // }
        // main();


    }

    // 清除已完成
    let clearDone = async () => {

        // // 首先找到需要删除的数据然后以此发请求
        // let promises = data.filter(item => item.done).map(itm => {
        //     // console.log(itm);
        //     return axios.delete(`/data/${itm.id}`);
        // })
        await reqClearDone(data);

        let newdata = data.filter((item) => {
            return !item.done;
        });
        setData(newdata);
    }

    // 请求并渲染数据
    useEffect(() => {
        async function main() {
            let data = await reqGet();
            setData(data);
        }
        main();
    }, [])

    return (
        <div className="todo-container">
            <div className="todo-wrap">

                <TodolistHeader addtodo={addtodo}></TodolistHeader>
                <TodolistMain getcheck={getcheck} deleitem={deleitem} data={data}></TodolistMain>
                <TodolistFooter clearDone={clearDone} data={data} checkedall={checkedall} all={data.length} done={data.filter((item) => item.done === true)}></TodolistFooter>
            </div>
        </div>
    );
}

export default TodoList;